@extends("admin.common.admin")
<title>文章管理</title>
@section("cnt")
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>
        首页
        <span class="c-gray en">&gt;</span>
        文章管理
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="page-container">
        @include("admin.common.msg")
        <form action="" method="get">
            <div class="text-c"> 日期范围：
                <input type="text" name="datemax" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" style="width:120px;">
                -
                <input type="text" name="datemin" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" style="width:120px;">
                <input type="text" class="input-text" style="width:250px" placeholder="输入会员名称、电话、邮箱" id="title" name="title">
                <button type="button" class="btn btn-success radius" id="submit" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
            </div>
        </form>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
        </span>
            <span class="r">共有数据：
            <strong></strong> 条
        </span>
        </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th width="40">标题</th>
                    <th width="40">访问数量</th>
                    <th width="70">封面</th>
                    <th width="130">加入时间</th>
                    <th width="130">状态</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr class="text-c">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <img src="" style="width: 80px" alt="">
                        </td>
                        <td></td>
                        <td class="td-manage"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section("js")
    <script src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script>
        const datatables = $(".table-sort").DataTable({
            // 每一页显示多少条数据
            lengthMenu:[2,1,3,6],
            // 是否允许进行本地搜索
            searching :false,
            // 显示处理的状态
            processing:true,
            // 指定字段不排序
            columnDefs:[
                {targets:[3,6],orderable:false}
            ],
            // 使用服务器端进行排序
            // 开启服务器端
            bServerSide:true,
            // 请求设置 发送ajax请求
            ajax:{
                // 请求地址
                url:'{{ route("admin.article.index") }}',
                // 请求的方式
                type:"GET",
                // 加入一个额外参数
                data:function (ret){
                    ret.title = $("#title").val();
                    ret.datemin = $("#datemin").val();
                    ret.datemax = $("#datemax").val();
                }
            },
            //渲染服务器响应过来的数据
            columns:[
                {data:'id',className:'text-c'},
                {data:'title'},
                {data:'click',className:'text-c'},
                {data:'pic'},
                {data:'created_at'},
                {data:'deleted_at'},
                {data:'action',defaultContent: "操作",className:'text-c'},
            ],
            // 回调函数处理数据源中的数据 dom操作
            createdRow:function(tr ,data){
                // 访问量
                $(tr).find("td:eq(2)").html(`<a href="{{ route('admin.article.count') }}?art_id=${data.id}">${data.click}</a>`);
                // 显示图片
                $(tr).find("td:eq(3)").html(`<img src="${data.pic}" style="width: 80px;"/>`);
                // 显示状态
                var html = "<span class=\"label label-success radius\">已启用</span>";
                if(data.deleted_at){
                    var html = "<span class=\"label label-danger radius\">禁用</span>";
                }
                $(tr).find("td:eq(5)").html(html);
            },
        });
        $(function () {
            $(".del").click(function () {
                // let href = ;
                layer.confirm('确认删除该用户吗？', {
                    btn: ['确认','取消'] //按钮
                }, ()=>{
                    $.ajax({
                        url : $(this).attr("href"),
                        type : "delete",
                        data :{
                            _token:"{{ csrf_token() }}"
                        }
                    }).then(ret => {
                        // console.log(ret);
                        layer.msg(ret.msg, {icon: 1,time: 2000},()=>{
                            if(ret.status == 200){
                                $(this).parents("tr").remove();
                            }

                        });
                    });

                });


                return false;
            });
        })

        $("#submit").click(function(){
            datatables.ajax.reload()
        })
        $(".table-sort").on("click",".del",function () {
            // alert(111)
            let url = $(this).attr("href");
            $.ajax({
                url:url,
                type:"delete",
                data:{
                    _token:"{{ csrf_token() }}",
                }
            }).then(ret=>{
                layer.msg(ret.msg,{icon: 1,time: 2000},()=>{
                    datatables.ajax.reload();
                })
            });
            return false;
        })
    </script>
@endsection
